
<!--purchase summary info-->
<div class="row-fluid">
    <div class="span6">
        <h4>Purchase Information</h4>
        <table class="table table-striped table-bordered table-condensed">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Product Description</th>
                    <th>Color</th>
                    <th>Purchase Amount</th>
                    <th>Unit Price</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <%for( var i = 0; i < pi.product_purchase_list.length; i++ ){
                    var product = '';
                    for( var j = 0; j < pi.product_list.length; j++ ){
                        if ( pi.product_list[j].feature.number == pi.product_purchase_list[i].product_id ){
                            product = pi.product_list[j];
                            break;
                        }
                    }
                %>
                    <tr>
                        <td><a href="/product/q/id/html/?id=<%=product.feature.number%>"><image src="/<%=product.images[0].imagesrc%>"/></a></td>
                        <td><%=product.feature.description%></td>
                        <td><%=pi.product_purchase_list[i].color%></td>
                        <td><%=pi.product_purchase_list[i].amount%></td>
                        <td><%=pi.product_purchase_list[i].price%></td>
                        <td><button>Atction</button></td>
                    </tr>
                <%}%>
            </tbody>
        </table>
    </div>

    <!--shippment info-->
    <div class="span6">
        <h4>Packing Information</h4>
        <!--packing table-->
        <table class="table table-striped table-bordered table-condensed">
            <thead>
                <tr>
                    <th>Box No.</th>
                    <th>Product</th>
                    <th>Product Description</th>
                    <th>Color</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
        <%
            var boxes = pi.packing.boxes;
            
            for(var i = 0; i < boxes.length; i++ ){
        %>
                <tr>
                    <td rowspan="<%=boxes[i].box_content.length%>"><image src="/icons/box.png">Box <%=boxes[i].box_number%></td>
                        <%for ( var k = 0; k < boxes[i].box_content.length; k++ ){

                            var product = '';
                            for( var l = 0; l < pi.product_list.length; l++ ){
                                if ( pi.product_list[l].feature.number == boxes[i].box_content[k].product_id ){
                                    product = pi.product_list[l];
                                    break;
                                }
                            }
                        %>
                                <!--for merge cell vertical by Box No column-->
                                <%if( k !== 0 ){ %>
                                    <tr>
                                <%} %>
                                    <td><a href="/product/q/id/html/?id=<%=product.feature.number%>"><image src="/<%=product.images[0].imagesrc%>"/></a></td>
                                    <td><%=product.feature.description%></td>
                                    <td><%=boxes[i].box_content[k].color%></td>
                                    <td><%=boxes[i].box_content[k].amount%></td>
                                <%if( i !== 0){ %>
                                    </tr>
                                <%}%>
                        <%}%>
                </tr>
            </tbody>

        <%  }
        %>
        </table><!--packing table end-->
        

    </div><!--end shippment info-->

</div><!--purchase end-->
